<!--
  @author:  long
  @date:    2023/3/8
  @file:    xx
  @require:
-->
<template>
  <div>
    <FixedOperation>
      <div class="text-right">
        <el-button type="danger" @click="close">关闭</el-button>
      </div>
    </FixedOperation>
    <div
      v-for="(item, index) in overviewData"
      class="mt-2 px-5 py-1"
      :key="index"
    >
      <el-descriptions column="2" border>
        <template #title>
          <TitleName
            :title="item.title"
            icon="i-carbon-bookmark-filled"
          ></TitleName>
        </template>
        <el-descriptions-item
          v-for="(t, i) in item.list"
          :key="i"
          :label="t.label"
          label-align="right"
          label-class-name="w-3/24"
          class-name="w-9/24"
        >
          <!--      所属行业        -->
          <template v-if="t.prop === 'industryTypeCode'">
            <dict-tag
              :options="industry_category"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      联系人类别        -->
          <template v-else-if="t.prop === 'khlb'">
            <dict-tag :options="contacts_class" :value="overviewInfo[t.prop]" />
          </template>
          <!--      联系人角色        -->
          <template v-else-if="t.prop === 'role'">
            <dict-tag :options="contacts_role" :value="overviewInfo[t.prop]" />
          </template>
          <!--      纳税人性质        -->
          <template v-else-if="t.prop === 'taxNature'">
            <dict-tag :options="tax_grade" :value="overviewInfo[t.prop]" />
          </template>
          <!--      星级        -->
          <template v-else-if="t.prop === 'starRating'">
            <el-rate disabled v-model="overviewInfo[t.prop]" />
          </template>
          <!--      来源        -->
          <template v-else-if="t.prop === 'origin'">
            <dict-tag
              :options="customer_source"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      状态        -->
          <template v-else-if="t.prop === 'status'">
            <dict-tag
              :options="supplier_status"
              :value="overviewInfo[t.prop]"
            />
          </template>
          <!--      职务        -->
          <template v-else-if="t.prop === 'dutyCode'">
            <dict-tag :options="duties_dict" :value="overviewInfo[t.prop]" />
          </template>
          <!--      信用等级        -->
          <template v-else-if="t.prop === 'creditListId'">
            <dict-tag :options="credit_rating" :value="overviewInfo[t.prop]" />
          </template>

          <template v-else>{{ overviewInfo[t.prop] }}</template>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <avue-crud ref="crud" :option="option" :data="overviewInfo.contactList">
      <template #menu-left="{}">
        <TitleName
          title="联系人信息"
          icon="i-carbon-bookmark-filled"
        ></TitleName>
      </template>
      <!--      <template #menu-right="{}"> </template>-->
      <!--   状态   -->
      <template #status="{ row }">
        <dict-tag :options="supplier_status" :value="row.status" />
      </template>
      <template #status-form="{ row }">
        <el-select v-model="row.status" placeholder="请选择状态" class="w-full">
          <el-option
            v-for="(item, index) in supplier_status"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <!--   角色   -->
      <template #roleCode="{ row }">
        <dict-tag :options="contacts_role" :value="row.roleCode" />
      </template>
      <template #roleCode-form="{ row }">
        <el-select
          v-model="row.roleCode"
          placeholder="请选择角色"
          class="w-full"
        >
          <el-option
            v-for="(item, index) in contacts_role"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <!--   职务  -->
      <template #dutyCode="{ row }">
        <dict-tag :options="duties_dict" :value="row.dutyCode" />
      </template>
      <template #dutyCode-form="{ row }">
        <el-select
          v-model="row.dutyCode"
          placeholder="请选择职务"
          class="w-full"
        >
          <el-option
            v-for="(item, index) in duties_dict"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <!--   岗位   -->
      <template #postCode="{ row }">
        <dict-tag :options="post_dict" :value="row.postCode" />
      </template>
      <template #postCode-form="{ row }">
        <el-select
          v-model="row.postCode"
          placeholder="请选择岗位"
          class="w-full"
        >
          <el-option
            v-for="(item, index) in post_dict"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </template>
      <!--      <template #menu="{ row, index }">-->
      <!--        <el-button-->
      <!--          text-->
      <!--          type="primary"-->
      <!--          :icon="row.$cellEdit ? 'Plus' : 'Edit'"-->
      <!--          @click="rowCell(row, index)"-->
      <!--          >{{ row.$cellEdit ? '保存' : '编辑' }}</el-button-->
      <!--        >-->
      <!--        <el-button-->
      <!--          text-->
      <!--          icon="Delete"-->
      <!--          type="primary"-->
      <!--          @click="rowCancel(row, index)"-->
      <!--          >{{ row.$cellEdit ? '取消' : '删除' }}</el-button-->
      <!--        >-->
      <!--      </template>-->
    </avue-crud>
  </div>
</template>

<script setup name="supplierDetails">
import FixedOperation from '@/components/FixedOperation'
import useTagsViewStore from '@/store/modules/tagsView'
import { getCurrentInstance } from 'vue'
import { getSupplierInfo } from '@/api/sourceModules/supplier'
import { getUuid } from '@/utils'
import { CodeToText } from 'element-china-area-data'
import { getDept } from '@/api/system/dept'
import { getTreeNodeByParam } from '@/utils/commo'
import useCommonStore from '@/store/modules/common'
const { proxy } = getCurrentInstance()
const router = useRouter()
// 通用数据store
const commonStore = useCommonStore()
// 字典 具体查看根目录DICT.md文件
const {
  industry_category,
  duties_dict,
  supplier_status,
  customer_source,
  contacts_role,
  tax_grade,
  post_dict,
  credit_rating
} = proxy.useDict(
  'industry_category',
  'duties_dict',
  'supplier_status',
  'customer_source',
  'contacts_role',
  'tax_grade',
  'post_dict',
  'duties_dict',
  'credit_rating'
)

const data = reactive({
  overviewInfo: {},
  overviewData: [
    {
      title: '基本信息',
      handleTitle: '',
      list: [
        { label: '供应商名称', prop: 'supplierName' },
        { label: '系统编号', prop: 'systemNumber' },
        { label: '状态', prop: 'status' },
        { label: '行业类别', prop: 'industryTypeCode' },
        { label: '来源', prop: 'origin' },
        { label: '星级', prop: 'starRating' },
        { label: '所在城市', prop: 'cityName' },
        { label: '对接人', prop: 'userName' },
        { label: '更新时间', prop: 'updateTime' },
        { label: '详细地址', prop: 'address' },
        { label: '公司电话', prop: '' },
        { label: '公司网址', prop: 'website' },
        { label: '纳税人性质', prop: 'taxNature' },
        { label: '供应商税号', prop: 'supplierTaxcode' },
        { label: '开户银行', prop: '' },
        { label: '信用等级', prop: 'creditListId' },
        { label: '征信积分', prop: 'creditScore' }
      ]
    }
  ],
  tableData: [],
  option: {
    addRowBtn: false,
    addBtn: false,
    delBtn: false,
    columnBtn: false,
    editBtn: false,
    cellBtn: false,
    cancelBtn: false,
    refreshBtn: false,
    menu: false,
    column: [
      {
        label: '联系人姓名',
        prop: 'contactName',
        cell: false
      },
      {
        label: '联系电话',
        prop: 'contactNumber',
        cell: false
      },
      {
        label: '状态',
        prop: 'status',
        cell: false
      },
      {
        label: '角色',
        prop: 'roleCode',
        cell: false
      },
      {
        label: '职务',
        prop: 'dutyCode',
        cell: false
      },
      {
        label: '岗位',
        prop: 'postCode',
        cell: false
      }
    ]
  }
})
const { overviewData, overviewInfo, tableData, option } = toRefs(data)
/**
 * 关闭方法
 */
function close() {
  useTagsViewStore().delView(router.currentRoute.value)
  router.go(-1)
}

function rowCell(row, index) {
  console.log('行编辑|保存')
  row.$cellEdit = !row.$cellEdit
  console.log(row)
  // console.log(proxy.$refs.crud, row)
  // proxy.$refs.crud.rowCell(row, index)
}
function rowCancel(row, index) {
  console.log('删除|取消', tableData.value)
  if (!row.$cellEdit) {
    tableData.value.splice(index, 1)
  }
  row.$cellEdit = !row.$cellEdit
}

/**
 * 供应商详情
 */
function getSupplierInfoData() {
  let id = router.currentRoute.value.query.supplierId
  getSupplierInfo(id).then(async res => {
    let obj = { ...res.data.co, ...res.data.bo }
    obj.contactList = res.data.contactList
    obj.coId = res.data.co.id
    // 转换城市代码
    if (obj.cityCode != null) {
      let arr = obj.cityCode.split(',')
      obj.cityName =
        CodeToText[arr[0]] + '-' + CodeToText[arr[1]] + '-' + CodeToText[arr[2]]
    }
    // 转换星级字段属性
    if (obj.starRating != null) {
      obj.starRating = parseInt(obj.starRating)
    }
    //获取部门人员数据
    const deptUserData = await commonStore.getUseTreeData()
    //根据当前用户id获取uuid
    let userObj = getTreeNodeByParam(deptUserData, obj.userId, 'id', [])
    obj.userName = userObj[0].label
    obj.contactList.forEach(item => {
      item.uuid = getUuid()
    })
    overviewInfo.value = obj
  })
}
/**
 * 初始化
 */
function init() {
  getSupplierInfoData()
}
init()
</script>

<style scoped lang="scss">
:deep(.avue-crud__menu) {
  min-height: 0px;
}
</style>
